<template>
  <!-- 检查不合格待办 -->
  <view class="goPassBelowmark">
    <view class="wrapper-content">
      <scroll-view
        scroll-y="true"
        @scrolltolower="scrollBottom"
        :style="[
          {
            height: '100%',
          },
        ]"
        v-if="dataSource.length"
      >
        <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
          <view class="md">
            <view class="line-hidden name">
              {{ v.companyMessageName }}
            </view>
            <view class="clause"> 检查时间：{{ v.checkTime }} </view>
            <view class="clause">
              处罚结果：{{ v.rectificationType == 1 ? "限期整改" : "停业整顿" }}
              <block v-if="v.isFined == 1"> 、罚款{{ v.finedMoney }}元 </block>
            </view>
            <view class="clause"> 检查类型：{{ v.industryExamineName }} </view>
          </view>
          <view
            class="down"
            :data-url="`/goOverBag/belowtheMark/nonGoover?taskId=${v.id}`"
            @click="handleClickRouter"
          >
            <view
              :class="
                getNumberDays(v.penaltyEndTime)[0] ? 'inspect1' : 'inspect2'
              "
            >
              <text v-if="getNumberDays(v.penaltyEndTime)[0]">
                处理倒计时:{{ getNumberDays(v.penaltyEndTime)[1] }}天
              </text>
              <text v-else>
                处理逾期:{{ getNumberDays(v.penaltyEndTime)[1] }}天
              </text>
            </view>
            <view>
              <u-icon name="arrow-right" color="#BBBBBB" size="20"></u-icon>
            </view>
          </view>
        </view>
        <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
      </scroll-view>

      <view v-if="!dataSource.length">
        <u-empty
          mode="list"
          text="暂无待办任务！"
          :icon="baseImgUrl + 'no-icon6.png'"
        >
        </u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import { findAgencyPage } from "@/api/goover.js";
import mixin from "@/utils/mixin.js";
import { handleClickRouter, getNumberDays } from "@/utils/util.js";

export default {
  mixins: [mixin],
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      dataSource: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onShow() {
    this.dataSource = [];
    this.pageConfig.pageNo = 1;
    this.getList();
  },
  methods: {
    handleClickRouter,
    getNumberDays,
    scrollBottom() {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    getList() {
      let data = {
        checkType: 1,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      findAgencyPage(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style lang="scss">
.goPassBelowmark {
  height: 100%;
  .wrapper-content {
    background: #f9f9f9;
    height: 100%;
    padding: 24rpx 20rpx;
    .wrapper-item {
      padding: 30rpx;
      padding-bottom: 0;
      background-color: #ffffff;
      margin-bottom: 20rpx;

      .md {
        border-bottom: 1rpx solid #e4e4e4;

        .name {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          margin-bottom: 17rpx;
        }

        .clause {
          margin-bottom: 20rpx;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #a1a1a1;
        }
      }

      .items {
        display: flex;
        .lt {
          width: 480rpx;
          max-width: 480rpx;
          .name {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            margin-bottom: 17rpx;
          }

          .clause {
            margin-bottom: 17rpx;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #a1a1a1;
          }
        }

        .rt {
          align-self: center;
          width: 140rpx;
          height: 122rpx;
          margin-left: 30rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .down {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 20rpx 0;
        font-size: 28rpx;
        font-weight: 400;
        color: #bbbbbb;

        .inspect1 {
          padding: 10rpx 20rpx;
          color: #2488f5;
          font-size: 28rpx;
          border-radius: 28rpx;
          background: #eef6ff;
        }

        .inspect2 {
          padding: 10rpx 20rpx;
          color: #eb0101;
          font-size: 28rpx;
          border-radius: 28rpx;
          background: #ffe6e6;
        }
      }
    }
  }
}
</style>
